<template>
	<view class="container">
		<u-loading-page :loading="isLoading" loading-text="加载中......" loading-mode="semicircle"></u-loading-page>
		<view class="content">

			<view class="content-header">
				<text v-if="info.status == '0'"
					style="font-size: 20px; color: orangered;font-weight: bold;margin-left: 5%;">待取书</text>
				<text v-if="info.status == '1'"
					style="font-size: 20px; color: orangered;font-weight: bold;margin-left: 5%;">待配送</text>
				<text v-if="info.status == '2'"
					style="font-size: 20px; color: orangered;font-weight: bold;margin-left: 5%;">配送中</text>
				<text v-if="info.status == '3'"
					style="font-size: 20px; color: orangered;font-weight: bold;margin-left: 5%;">借阅成功</text>
				<text v-if="info.status == '4'"
					style="font-size: 20px; color: orangered;font-weight: bold;margin-left: 5%;">待还书</text>
				<text v-if="info.status == '5'"
					style="font-size: 20px; color: orangered;font-weight: bold;margin-left: 5%;">已还书</text>
			</view>
			<view class="content-address" v-if="info.type == '1'">
				<view class="content-address-icon">
					<view
						style="width: 100%;margin-top: 20%;display: flex;align-items: center;justify-content: center;">
						<u-icon name="map" size="28"></u-icon>
					</view>
				</view>
				<view class="content-address-item">
					<view class="content-address-item-up">
						<text style="font-weight: bold; font-size: 18px; margin-top: 4%">{{info.recipient}}</text>
						<text
							style="margin-left: 7%; font-weight: bold; font-size: 18px; margin-top: 4%">{{info.phone}}</text>
					</view>
					<view class="content-address-item-down">
						<!-- <text style="font-size: 15px">{{orderData.addressInfo.area}}
							{{orderData.addressInfo.detailedAddress}}</text> -->
						<text style="font-size: 15px;">{{info.area}} {{info.detailedAddress}}</text>
					</view>
				</view>
			</view>
			<view class="content-book">
				<view class="content-book-title">
					<u-icon name="shopping-cart" size="32"></u-icon>
					<text>借阅列表</text>
				</view>
				<view class="content-book-list">
					<view class="content-book-photo" v-for="(book, index) in info.bookList" :key="book.id">
						<image v-if="book.photo != null" style="width: 100%; height: 100%;" :src="book.photo">
						</image>
						<view v-if="book.photo == null"
							style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: lightgrey; font-size: 14px;margin-left: 5%;">
							暂无图片
						</view>
					</view>
				</view>
			</view>
			<view class="content-item">
				<view style="width: 100%;height: 5vh; display: flex;align-items: center;">
					<text style="margin-left: 5%;">订单编号: </text>
					<text style="margin-left: 7%;font-weight: bold;">{{info.id}} </text>
				</view>
				<view style="width: 100%;height: 5vh; display: flex;align-items: center;">
					<text style="margin-left: 5%;">下单时间: </text>
					<text style="margin-left: 7%;font-weight: bold;">
						{{ info.createTimeStr }}
					</text>
				</view>
				<view style="width: 100%;height: 5vh; display: flex;align-items: center;">
					<text style="margin-left: 5%;">归还时间: </text>
					<text v-if="info.expiredTime != null" style="margin-left: 7%;font-weight: bold;color: red;">
						{{ info.expiredTime }}
					</text>
					<text v-if="info.expiredTime == null" style="margin-left: 7%;font-weight: bold;color: red;">
						暂无归还时间
					</text>
				</view>
				<view style="width: 100%;height: 5vh; display: flex;align-items: center;">
					<text style="margin-left: 5%;">取书方式: </text>
					<text v-if="info.type == '1'" style="margin-left: 7%;font-weight: bold;">送货到家</text>
					<text v-if="info.type == '2'" style="margin-left: 7%;font-weight: bold;">上门取书</text>
				</view>
				<view v-if="info.type == '1'" style="width: 100%;height: 5vh; display: flex;align-items: center;">
					<text style="margin-left: 5%;">配送人名称: </text>
					<text style="margin-left: 7%;font-weight: bold;">{{info.deliveryName}}</text>
				</view>
				<view v-if="info.type == '1'" style="width: 100%;height: 5vh; display: flex;align-items: center;">
					<text style="margin-left: 5%;">配送人电话: </text>
					<text style="margin-left: 7%;font-weight: bold;">{{info.deliveryPhone}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderInfo
	} from '@/api/order';
	import config from '@/config';
	import DateFormatter from '@/utils/dateFormatter.js'
	export default {
		data() {
			return {
				orderId: 0,
				isLoading: false,
				info: {}
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.isLoading = true
				setTimeout(() => {
					orderInfo(this.orderId).then(res => {
						if (res.code === 200) {
							this.info = res.data
							if (this.info != null) {
								this.info.bookList.forEach(item => {
									if (item.photo != null) {
										item.photo = config.baseUrl + item.photo;
									}
								})
							}
						}
					})
					this.isLoading = false
				}, 2000); // 2秒后执行	
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content-header {
		width: 100%;
		height: 8%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		border: none;
		border-bottom: 1px solid #E8E8E8;
	}


	.content-address {
		// margin-top: 3%;
		background-color: #ffffff;
		display: flex;
		// justify-content: flex-end;
		width: 100%;
		height: 12%;
	}

	.content-address-icon {
		width: 10%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-address-item {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-address-item-up {
		width: 100%;
		height: 50%;
		display: flex;
	}

	.content-address-item-down {
		width: 100%;
		height: 50%;
	}

	.content-book {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 5%;
		display: flex;
		flex-direction: column;
	}

	.content-book-title {
		width: 100%;
		height: 7vh;
		border: none;
		border-bottom: 1px solid #E8E8E8;
		display: flex;
		// flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.content-book-list {
		width: 100%;
		height: 14vh;
		// flex-direction: column;
		// justify-content: center;
		align-items: center;
		display: flex;
	}

	.content-book-photo {
		width: 10vh;
		height: 12vh;
		display: flex;
		margin-left: 5%;
		// flex-direction: column;
	}

	.content-item {
		margin-top: 5%;
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 5%;
		flex-direction: column;
	}
</style>